import React, { Component } from 'react'
import { connect } from 'dva';
import { Input, Button, Form, Row, Col, notification } from 'antd';
import moment from 'moment';
import styles from '../styles.less'
import { DropDownSelect } from '@/components/DropDownSelect';
import { FormComponentProps } from "antd/lib/form/Form";
import Imgviewer from '@/components/ImgViewer';

import { dealElement } from '@/utils/util';

interface Props extends FormComponentProps {
  dispatch?: Function,
  dict?: any,
  data: {
    id: number,
    endTime: string,
    startTime: string,
    contractName: string,
    contractPhone: string,
    attachList: Array<string>,
    statusName: string,
    fireBrigade: string,
    note: string,
    remark: string
  },
  match: {
    params: {
      id: number
    }
  },
}

function formatData(details) {
  const { startTime, endTime, contractName, contractPhone, note, fireBrigade } = details;
  const date = `${moment(startTime).format('YYYY-MM-DD')}-${moment(endTime).format('YYYY-MM-DD')}`;
  const values = {
    contractName,
    contractPhone,
    note,
    fireBrigade,
    date
  }
  return values
}

@connect(({ record }) => ({
  data: record.details,
  dict: record.dict
}))
class FormItem extends Component<Props, any> {

  componentDidMount() {
    const { dispatch, match, form } = this.props;
    const { params } = match;

    dispatch({ type: 'record/queryDict', payload: { keyList: ['record.fire.brigade'] } })
    dispatch({
      type: 'record/queryInfoById',
      payload: {id: params.id}
    }).then(() => {
      const { data } = this.props;
      form.setFieldsValue(data && formatData(data))
    })
  }

  handleSubmit = (auditResult) => {

    const { form, dispatch, data } = this.props;

    form.validateFields((err, values) => {

      if (!err) {
        const ans = {
          id: data.id,
          auditResult,
          auditNote: values.auditNote
        }
        const payload = dealElement(ans);
        dispatch({ type: 'record/queryAuditById', payload })
      } else {
        notification['error']({
          message: `${data.id ? '修改' : '创建'}失败`,
          description: '字段验证不通过',
        });
      }
    })
  }

  render() {
    const { data, form, dict = {} } = this.props;
    const { TextArea } = Input;
    const FormItem = Form.Item;

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 },
      },
    };

    return (
      <Form>
        <section className={styles.auditMain}>
        <p className={styles.auditTips}>报备申请单</p>
          <Row>
            <FormItem
              label="联系人"
              {...formItemLayout}
            >
              {getFieldDecorator('contractName')(
                <Input disabled style={{width: '100%'}} placeholder='请输入联系人' />
              )}
            </FormItem>
          </Row>
          <Row>
            <FormItem
              label="联系电话"
              {...formItemLayout}
            >
              {getFieldDecorator('contractPhone')(
                <Input disabled style={{width: '100%'}} placeholder='请输入联系电话' />
              )}
            </FormItem>
          </Row>
          <Row>
            <FormItem
              label="报备期限"
              {...formItemLayout}
            >
              {getFieldDecorator('date')(
                <Input disabled style={{width: '100%'}} placeholder='请输入报备期限' />
              )}
            </FormItem>
          </Row>
          {
            data && data.fireBrigade ? <Row>
              <FormItem
                {...formItemLayout}
                label='消防队'
              >
                {getFieldDecorator('fireBrigade')(
                  DropDownSelect(dict, 'record.fire.brigade')
                )}
              </FormItem>
            </Row> : null
          }
          <Row>
            <FormItem
              label="报备内容"
              {...formItemLayout}
            >
            {getFieldDecorator('note')(
              <TextArea style={{ height: '100px', resize: 'none' }} disabled />
            )}
            </FormItem>
          </Row>
          <Row>
            <FormItem
              label="审核理由"
              {...formItemLayout}
            >
            {getFieldDecorator('auditNote')(
              <TextArea style={{ height: '100px', resize: 'none' }} />
            )}
            </FormItem>
          </Row>
          <section className={styles.imgStyle}>
            <p>报备附件:</p>
            {
              data && data.attachList && data.attachList.map((it, ind) => (
                <Imgviewer key={ind} hasText="查看附件图片" missText="暂无附件图片" url={it}/>
              ))
            }
          </section>
          <Row>
            <Col span={3} offset={12}><Button onClick={() => {this.handleSubmit(1)} }>通过</Button></Col>
            <Col span={3}><Button onClick={() => {this.handleSubmit(0)} }>驳回</Button></Col>
            <Col span={3}><Button onClick={() => {window.history.back();} }>返回</Button></Col>
          </Row>

        </section>
      </Form>
    );
  }
}

const FormList = Form.create()(FormItem);
export default FormList;
